<template>
  <div className="noShop" v-if="!shopList.length">
    <img className="noShopImg" src="../../assets/shopcart.png" alt="">
    <span className="noShopText" @click="toIndex">去添加点东西吧</span>
  </div>
  <div class="shopMain" v-else>
    <div class="mainCard" v-for="(shop,index) in shopList" :key="shop.id">
      <van-radio-group class="vanRadioGroup" @click="changeCheckedOne(index,shop)" v-model="shop.isChecked" >
        <van-checkbox v-model="shop.isChecked" class="vanRadio"></van-checkbox> 
      </van-radio-group>
      <van-card
          :num="shop.skuNum"
          class="vanCard"
          :price="shop.skuPrice"
          
          :title="shop.skuName"
          :thumb="shop.imgUrl"
        >
          <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" class="plus" @click="changeNum(shop,1,index)">+</van-button>
            <van-button size="mini" class="minus" @click="changeNum(shop,-1,index)">-</van-button>
          </template>
        </van-card>
    </div>
    
    


    <van-submit-bar safe-area-inset-bottom :price="total* 100" class="shopFloor">
      <van-checkbox :checked="isAllSelect" @click="changeAll(isAllSelect)">全选</van-checkbox>
      <template #button>
        
        <div id="Popup">
          <van-cell is-link @click="showPopup">详情</van-cell>
    
          <van-popup
            v-model:show="showBottom"
            closeable
            
            round
            position="bottom"
            :style="{ height: '30%' ,bottom: '130px'}"
            safe-area-inset-bottom
            z-index="-9"
            :overlay="false"
          >
            <template #default >
              <div class="shopPopup">
                <div class="header">金额明细</div>
                <div class="main">
                  <span>商品总价</span>
                  <span>￥{{total* 100}}</span>
                </div>
                <div class="floor">
                  <span>合计</span>
                  <span>￥{{total* 100}}</span>
                </div>
              </div>
            </template>
          </van-popup>
          
        </div>
        <van-button type="danger" size="small" @click="toTrade">结算</van-button>
      </template>
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </van-submit-bar>
    
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name:'shopCart'
  })
</script>
<script lang="ts" setup>
  import type { ShopListData } from '@/api/shopcart';
  import { useRouter } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { showToast } from 'vant'
  import { showConfirmDialog } from 'vant';
  import { computed, nextTick, onMounted, ref } from 'vue';
  import { shopDataStore } from '@/stores/shopcart';
  // import {centerStore} from '@/stores/center'
  // const centerState =centerStore()
  // const {token}=storeToRefs(centerState)
  const router=useRouter()
  const onClickLink = () => {
    router.push('/trade')
  };
  const checked = ref(1);

  const shopStore = shopDataStore()
  const {shopList}=storeToRefs(shopStore)
  onMounted(()=>{
    shopStore.getShopList()
    // shopStore.getToken()
  })

  const toIndex=()=>{
    router.push('/index')
  }

// console.log(shopList);

// 显示弹出层
  const showBottom = ref(false);
  const showPopup = () => {
    showBottom.value = true;
  };

  // const shopList=ref<ShopListData[]>(
  //   [
  //   {
  //       "id": 14728,
  //       "userId": "3226",
  //       "skuId": 12,
  //       "cartPrice": 9197,
  //       "skuNum": 1,
  //       "imgUrl": "http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-rgfWAVRWzAABUiOmA0ic932.jpg",
  //       "skuName": "Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G 双卡双待手机",
  //       "isChecked": 0,
  //       "createTime": "2023-02-27 16:34:04",
  //       "operateTime": "2023-02-28 11:15:50",
  //       "isOrdered": 1,
  //       "orderTime": "2023-04-04 10:17:08",
  //       "sourceType": "QUERY",
  //       "sourceId": 12,
  //       "skuPrice": 9197,
  //       "couponInfoList": null
  //   },
  //   {
  //       "id": 14544,
  //       "userId": "3226",
  //       "skuId": 2,
  //       "cartPrice": 6999,
  //       "skuNum": 24,
  //       "imgUrl": "http://47.93.148.192:8080/group1/M00/00/01/rBHu8l-rfvmAcbl2AAFopp2WGBQ404.jpg",
  //       "skuName": "小米10 至尊纪念版 双模5G 骁龙865 120W快充 12GB+256GB 陶瓷黑 游戏手机",
  //       "isChecked": 1,
  //       "createTime": "2023-02-25 19:36:07",
  //       "operateTime": "2023-04-04 16:03:00",
  //       "isOrdered": 1,
  //       "orderTime": "2023-04-04 10:17:08",
  //       "sourceType": "QUERY",
  //       "sourceId": 2,
  //       "skuPrice": 6999,
  //       "couponInfoList": null
  //   },
  //   {
  //       "id": 14545,
  //       "userId": "3226",
  //       "skuId": 13,
  //       "cartPrice": 4188,
  //       "skuNum": 3,
  //       "imgUrl": "http://47.93.148.192:8080/group1/M00/00/02/rBHu8l-sklaALrngAAHGDqdpFtU741.jpg",
  //       "skuName": "华为 HUAWEI P40 麒麟990 5G SoC芯片  6GB+128GB亮黑色全网通5G手机",
  //       "isChecked": 0,
  //       "createTime": "2023-02-25 11:30:45",
  //       "operateTime": "2023-02-28 11:15:44",
  //       "isOrdered": 1,
  //       "orderTime": "2023-04-04 10:17:08",
  //       "sourceType": "QUERY",
  //       "sourceId": 13,
  //       "skuPrice": 4188,
  //       "couponInfoList": null
  //   },
  //   {
  //       "id": 14546,
  //       "userId": "3226",
  //       "skuId": 20,
  //       "cartPrice": 2343,
  //       "skuNum": 7,
  //       "imgUrl": "http://47.93.148.192:8080/group1/M00/02/DB/rBHu8mGxPcKAZ_qwAAAaCuo69pQ498.jpg",
  //       "skuName": "vivo S10 Pro 5G手机 12GB+256GB 青柠 超轻薄机身  6nm旗舰芯片 拍照手机 蓝",
  //       "isChecked": 1,
  //       "createTime": "2023-02-24 21:17:49",
  //       "operateTime": "2023-04-04 16:02:48",
  //       "isOrdered": 1,
  //       "orderTime": "2023-02-28 08:39:17",
  //       "sourceType": "QUERY",
  //       "sourceId": 20,
  //       "skuPrice": 2343,
  //       "couponInfoList": null
  //   },
  //   {
  //       "id": 14547,
  //       "userId": "3226",
  //       "skuId": 4,
  //       "cartPrice": 999,
  //       "skuNum": 2,
  //       "imgUrl": "http://47.93.148.192:8080/group1/M00/00/01/rBHu8l-rgJqAHPnoAAF9hoDNfsc505.jpg",
  //       "skuName": "Redmi 10X 4G Helio G85游戏芯 4GB+128GB 冰雾白 游戏智能手机 小米 红米",
  //       "isChecked": 0,
  //       "createTime": "2023-02-24 21:01:27",
  //       "operateTime": "2023-02-28 11:15:44",
  //       "isOrdered": 1,
  //       "orderTime": "2023-02-28 08:39:17",
  //       "sourceType": "QUERY",
  //       "sourceId": 4,
  //       "skuPrice": 999,
  //       "couponInfoList": null
  //   }
  // ]
  // )
  const num =ref(3)

  // const getShopList=async()=>{
  //   let result =await serve.get('/api/cart/cartList')
  //   // console.log(result);
  // }

  // const removeShop = async()=>{
  //   await serve.delete('/api/cart/deleteCart/{skuId}')
  // }
// 改变数量
  const changeNum=(shop:ShopListData,num1:number,index:number)=>{
    shop.skuNum+=num1
    
    if (shop.skuNum < 1) {
      showConfirmDialog({
        title: '标题',
        message:'你确定删除商品吗？',
      })
        .then(() => {
          // on confirm
          // shopList.value.splice(index,1)
          shopStore.removeShop(shop.skuId)
        })
        .catch(() => {
          shop.skuNum=1
        });
    }
    
  }

  const changeCheckedOne=(index:number,shop:ShopListData)=>{
    // console.log(shop);
    
    if (shop.isChecked) {
      // console.log(shop.isChecked);
      checked.value=!shop.isChecked as any
    }
    // console.log(shop.isChecked);
    
    shopStore.checkStatu(shop.skuId,shop.isChecked)
  }
// 全选全不选
  const changeAll=(isAllSelect:any)=>{
    shopList.value.forEach(item=>{
      if (item.isChecked===isAllSelect) {
        item.isChecked=isAllSelect?1:0
      }else{
        item.isChecked=isAllSelect?0:1
      }
      
    })
    console.log(isAllSelect);
    
  }

  // 全选功能
    const isAllSelect=computed(()=> {
      // every 只要每一项的 isChecked 都为 1 , 就返回 true
      return shopList.value.every((item) => item.isChecked === 1) && shopList.value.length !== 0
    })
// 计算总价
  const total = computed(() => {
    let sum = 0
    let _list = shopList.value.filter(item => item.isChecked)
    _list.forEach(item => {
      sum += item.skuPrice * item.skuNum
    })
    return sum
  })
  
  // 结算
  const toTrade=async()=>{
    
    await router.push('/trade')
  }
  
</script>

<style lang="less" scoped>
.noShop{
  .noShopImg{
    width: 375px;
    height: 375px;
    margin-top: 100px;
  }
  .noShopText{
    display: block;
    width: 375px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }
}
.shopMain{
  position: relative;
  .mainCard{
    display: flex;
    .vanRadioGroup{
      margin-top: 60px;
      .vanRadio{
        margin: 0 20px;
        .vanCard{
          width: 300px;
          border-radius: 40px;
          margin: 10px;
        }
      }
    }
    
  }
  .shopFloor{
    position: fixed;
    bottom: 50px;
    #Popup{
      
        .shopPopup{
          padding: 20px;
          .header{
            font-size: 28px;
            font-weight: bold;
            text-align: center
          }
          .main{
            font-size: 20px;
            display: flex;
            justify-content: space-between;
          }
          .floor{
            font-size: 20px;
            display: flex;
            justify-content: space-between;
            margin-top: 80px;
          }
        }
    }
  }
}





</style>
